<script>
$(document).ready(function(){
	params = {
	mask:$('#images-mask'),
	elements:$('#images-mask img'),
	prevbtn:$('#prev-button'),
	nextbtn:$('#next-button'),
	displaytype:'column',
	elementsByRow:3,
	rowsDisplayed:2
	};
	$('#images-container').magicScroller( params );
	}); 
</script>
<style type="text/css">
#images-container { height:430px; width:860px; float:left; }
#images-container #images-mask { height:430px; width:860px; overflow: hidden; }
#images-container #images-mask img { width:280px; height:210px; }
#flechas { float:left; height:430px; width:50px; overflow:hidden; background:none repeat scroll 0 0 #FFFFFF; border:1px solid #AAAAAA; }
#separator { height:350px; width:50px; }
#flechas .button { height:50px; height:40px; opacity:.8; }
#flechas .button:hover { opacity:1; }
</style>



<div id="images-container">
	<div id="images-mask" style="position: absolute; overflow-y: hidden;">
	 	<#list list as photo>
			<img src="${(photo.uuid)!''}" alt="${(photo.name)!''}"/> 
		</#list>
	</div>
</div>
<div id="flechas">
	<a id="prev-button" class="button" href="#">
		<img alt="up" src="images/up.jpg">
	</a>
<div id="separator"></div>
	<a id="next-button" class="button" href="#">
		<img alt="down" src="images/down.jpg">
	</a>
</div>
